<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>node</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background: red url() 0 0 no-repeat;
		}
		.box1{
			width: 190px;
			height: 190px;
			background: #B97A57 url() 0 0 no-repeat;
		}
		li{
			list-style: none;
			width: 30px;
			height: 50px;
			background: #99B219 url() 0 0 no-repeat;
			margin-right: 5px;
			float: left;
		}		
	</style>
</head>
<body>
	<div class="box" id="box"><a id="url" href="">5555555555<li></li><li></li><li></li></a></div><div class="box1" id="box1"></div>

	<script type="text/javascript">
	var box=document.getElementById('box');
	// box.parentNode.style.backgroundColor='black';
	box.firstChild.style.backgroundColor='blue';//因为空格也算一个节点，所以抓取对象之间不能有空格，否则就抓到了空格，无法作用到对象上。
	var url = document.getElementById('url');

	var box1  = document.getElementById('box1');

	// url.firstChild.style.backgroundColor="yellow";//抓到的是单个个体，三个列表的第一个，只有第一个变色。


	// url.childNodes.style.backgroundColor="yellow";//抓取整个子集，三个li都变色

	// url.nextSibling.style.backgroundColor='#D117D3';
	 // url.parentNode.parentNode.style.backgroundColor="#58B216";//url的父节点的父节点

	// box1.innerHTML="<p>hahahahahah</p>";//创建文本节点


//追加对象，输入框
	var obj=document.createElement("input");
	obj.setAttribute('type','text');
	box1.appendChild(obj);
//一个对象只能追加一次，如果要追加两次，要重新创建一个对象
	var obj=document.createElement("input");
	obj.setAttribute('type','text');
	box1.appendChild(obj);

	var obj=document.createElement("input");
	obj.setAttribute('type', 'submit');
	obj.setAttribute('value', '提交');

	box1.appendChild(obj);
//
	var obj=document.createElement("input");
	obj.setAttribute('value', '重置');
	box1.appendChild(obj);



	
	</script>
</body>
</html>